<template>
  <div class="icon-wapper">
    <div
      class="icon-area"
      v-for="(item,index) in icons"
      :key="index">
      <e-icon
        :size="50"
        :type="item">
      </e-icon>
      <span>{{item}}</span>
    </div>
    <icon-md class="markdown-body"></icon-md>
  </div>
</template>

<script>
import iconMd from '../../docs/icon.md';
export default {
  name:'iconExamples',
  components: {
    iconMd
  },
  data() {
    return {
      icons: [
        "down",
        "warning-2",
        "spin-21",
        "default",
        "screen",
        "minus",
        "no-data",
        "apps",
        "clock",
        "copy",
        "bell",
        "closed-eye",
        "delete",
        "edit-square",
        "enclosure",
        "cart",
        "a-eye2x",
        "enlarge",
        "expand",
        "file-excel",
        "date",
        "file-pdf",
        "file-image",
        "file-gif",
        "file-ppt",
        "file-text",
        "file-unknown",
        "file-word",
        "file-zip",
        "file",
        "folder-open",
        "folder",
        "info-circle",
        "frozen",
        "narrow",
        "function",
        "member",
        "pause-circle",
        "play-circle",
        "question",
        "setting",
        "refresh",
        "sq-download",
        "search",
        "sq-upload",
        "photo-failed",
        "relation",
        "share",
        "upload-to-cloud",
        "warning-circle",
        "arrow-up",
        "arrow-down",
        "arrow-left",
        "arrow",
        "cross",
        "plus",
        "success",
        "back-top",
        "close",
        "download",
        "ellipsis",
        "edit",
        "exchange",
        "fold",
        "link",
        "passed",
        "replay",
        "recovery",
        "restart",
        "unfold",
        "upload",
        "checked",
        "warning",
        "clear",
        "info",
        "location"]
    }
  }
}
</script>
<style scoped lang="less">
.icon-wapper{
  width: 1024px;
  margin:0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  .icon-area{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px;
    span{
      width: 100px;
      text-align: center;
    }
  }
}
</style>
